import React, { Component } from "react";
import { NavLink, Switch, Route, Redirect } from "react-router-dom";

import About from '../views/about';
import Home from '../views/home';

class App extends Component {
	render() {
		return (
			<div>
				<div className="row">
					<div className="col-xs-offset-2 col-xs-8">
						<div className="page-header">
							<h2>React Router Demo</h2>
						</div>
					</div>
				</div>

				<div className="row">
					<div className="col-xs-2 col-xs-offset-2">
						<div className="list-group">
							<NavLink className="list-group-item" activeClassName="active" to='/about'>About</NavLink>
							<NavLink className="list-group-item" activeClassName="active" to='/home'>Home</NavLink>
						</div>
					</div>
					<div className="col-xs-6">
						<div className="panel">
							<div className="panel-body">
								{/*可切换的路由组件*/}
								<Switch>
									<Route path='/about' component={About} />
									<Route path='/home' component={Home} />
									<Redirect to='/home' />
								</Switch>
							</div>
						</div>
					</div>
				</div>
			</div>
		);
	}
}

export default App;